<!--
 * @Author: liuyonghu
 * @Date: 2021-10-30 17:24:22
 * @LastEditTime: 2021-10-30 18:20:10
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/网络请求测试/网络请求测试.html
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <script>
      const fetchRequest0 = new Request("./data/0.json");

      const fetchRequest1 = new Request("./data/1.json");

      fetch(fetchRequest0)
        .then((res) => {
          console.log(" - fetchRequest0 - ");
          const len = 10000000000;
          for (let index = 0; index < len; index++) {}
          console.log(" - fetchRequest0 - for  end ");
          return res.json();
        })
        .then((res) => {
          console.log(" - fetchRequest0 - end ");
        });

      fetch(fetchRequest1)
        .then((res) => {
          console.log(" - fetchRequest1 - ");
          const len = 10000000000;
          for (let index = 0; index < len; index++) {}
          console.log(" - fetchRequest1 - for  end ");
          return res.json();
        })
        .then((res) => {
          console.log(" - fetchRequest1 - end ");
        });
    </script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
 
      $(document).ready(function () {
        console.log(" - fetchRequest0 - start ");
        $.ajax({
          url: "./data/0.json",
          success: function (res) {
            console.log(" - fetchRequest0 - ");
            const len = 100;
            for (let index = 0; index < len; index++) {}
            console.log(" - fetchRequest0 - for  end ");
          },
        });
        console.log(" - fetchRequest1 - start ");
        $.ajax({
          url: "./data/1.json",
          success: function (res) {
            console.log(" - fetchRequest1 - ");
            const len = 10000000000;
            for (let index = 0; index < len; index++) {}
            console.log(" - fetchRequest1 - for  end ");
          },
        });
      });
    </script>
  </body>
  <!-- demo 证实 js 中 网络任务是异步的 但是 回调顺序由响应的先后决定  只有先响应的执行完作用域内的代码之后才会顺序执行之后的请求回调  所以容易响应体或者某一个想用中处理数据时间过久造成其他请求 阻塞 -->
</html>
